<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>学生信息管理系统</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <style>
        #h1{
            text-align: center;
        }
        a{

            text-decoration: none;

        }
        span{
            color: purple;

        }
        #th_tag th{
            text-align: center;
        }

        .page_css{
            border-radius: 5px;
        }
        #pageColor{
            background-color: #eee;
        }

    </style>

    <script>
        function del(stu_id) {
            var i = confirm("确认删除吗？")
            if (i==true){
                location.href = "delete?delete_id=" + stu_id;
            }
        }

        function modified() {

            for(var i=1;i<=4;i++){
                var num = "modify_tag"+""+i;
                var modify_tag = document.getElementById(num)
                modify_tag.style.border = "solid gray "
                modify_tag.setAttribute("contentEditable",true)
            }

        }

    </script>

</head>
<body>

    <div class="container-fluid">

        <h2 id="h1">学生信息管理系统</h2>

            <nav class="navbar navbar-default">
            <div class="container-fluid">

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="navbar-left nav navbar-nav">
                        <li class="active"><a href="/student">首页</a></li>
                    </ul>


                    <form class="navbar-form navbar-left" action="/student/find" method="post">

                    <div class="form-group">
                      <input type="text" name="str" class="form-control" placeholder="此处填写学号或姓名">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                  </form>

                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="/student/addStudent">添加学生</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ username }} <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="javascript:modifyPassword()">更改密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="/student/logout">退出</a></li>
                            </ul>
                        </li>

                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>


        <table class='table table-hover table-bordered active ' border="1" >
            <thead>
                <tr id="th_tag" class="success">
                    <th>学号</th>
                    <th>班级</th>
                    <th>曾用名</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>身份证号</th>
                    <th>专业</th>
                    <th>民族</th>
                    <th>家庭住址</th>
                    <th>操作</th>
                </tr>


            </thead>

            <tbody align="center">
                    <!-- {#将views.py返回的学生集合数据context中的键students通过for循环遍历#} -->
                {% for student in students %}
                    <tr >
                        <td >{{ student.id }}</td>
                        <td >{{ student.classes.name }}</td>

                        <td id="modify_tag1">{{ student.formerName }}</td>

                        <td>{{ student.name }}</td>


                        <td>{{ student.gender }}</td>

                        <td>{% if student.age == None %}{{ "" }}{% else %}{{ student.age }}{% endif %}</td>

                        <td id="modify_tag2">{{ student.card_id }}</td>

                        <td>{{ student.major }}</td>

                        <td>{{ student.nation }}</td>

                        <td id="modify_tag3">{{ student.place }}</td>

                        <td>
                            <a class="btn btn-default btn-sm" href='/student/update?update_id={{ student.id }}'> 修改 </a>
                            <a class="btn btn-default btn-sm" href="javascript:del({{ student.id }})">删除</a>
                        </td>
                    </tr>
                {% endfor %}

            </tbody>
        </table>

        <!--    <nav aria-label="Page navigation" style="text-align: center;">-->
        <!--  <ul class="pagination" >-->
        <!--    -->
        <!--    <li style="display: inline-block; padding: 3px; margin: 3px;" >-->
        <!--        {% if students.has_previous %}-->
        <!--            <a href="/student/page/{{ students.previous_page_number }}" aria-label="Previous" class="page_css">上一页</a>-->
        <!--        {% endif %}-->
        <!--    </li>-->

        <!--        {% for page in pageList %}-->
        <!--            <li style="display: inline-block; padding: 3px; margin: 3px;" >-->
        <!--                <a class="page_css" href='/student/page/{{ page }}' {% if currentNum == page %}id="pageColor"{% endif %} >{{ page }}</a>-->
        <!--            </li>-->
        <!--        {% endfor %}-->


        <!--    <li style="display: inline-block; padding: 3px; margin: 3px;">-->
        <!--        {% if students.has_next %}-->
        <!--            <a href="/student/page/{{ students.next_page_number }}" aria-label="Next" class="page_css">下一页</a>-->
        <!--        {% endif %}-->
        <!--    </li>-->
        <!--  </ul>-->
        <!--</nav>-->

        <!--<div>共{{ count }}条记录</div>-->



    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title">
					提示
				</h4>
			</div>
			<div class="modal-body">
                <div class="input-group-lg input-group">
                     <span class="input-group-addon" id="sizing-addon1">密&emsp;&emsp;码:</span>
                    <input id="password" name="password" type="password" class="form-control"  aria-describedby="sizing-addon1">
                </div>
                <div class="input-group-lg input-group">
                    <span class="input-group-addon" id="sizing-addon1">修改密码:</span>
                    <input id="updatePassword" name="updatePassword" type="password" class="form-control"  aria-describedby="sizing-addon1">
                </div>
                <div class="input-group-lg input-group">
                    <span class="input-group-addon" id="sizing-addon1">确认密码:</span>
                    <input id="submitPassword" name="submitPassword" type="password" class="form-control"  aria-describedby="sizing-addon1">
                </div>

			</div>
			<div class="modal-footer" style="text-align: center">
                <button onclick="isUpdatePassword();$('#myModal').modal('hide');" type="button" class="btn btn-primary">
					确认
				</button>
				<button type="button" class="btn btn-primary" onclick="$('#myModal').modal('hide');">
					取消
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
    </div>

    <div class="modal fade" id="returnModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title">
					提示
				</h4>
			</div>
			<div class="modal-body" id="resultInfo">

			</div>
			<div class="modal-footer" style="text-align: center">
                <button type="button" class="btn btn-primary">
					确认
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
    </div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/static/js/jquery-3.2.1.min.js" ></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/static/js/bootstrap.min.js" ></script>

<script>
    window.onclick = function () {
        $('.dropdown-toggle').dropdown();

    }

    function modifyPassword() {
         $("#myModal").modal("show");
    }

    function isUpdatePassword(){
        var password = $("#password").val();
        var updatePassword = $("#updatePassword").val();
        var submitPassword = $("#submitPassword").val();

        $.ajax({
            url:'/student/updatePassword',
            data:{'password':password,'updatePassword':updatePassword,'submitPassword':submitPassword},
            type:'POST',
            dataType:'json',

            success:function (result) {
                $("#resultInfo").html(result.info);
                $("#returnModal").modal("show");

                $("#returnModal").click(function () {
                    $('#returnModal').modal('hide');
                    if(result.flag){
                        location.href = "/student/login";
                    }
                })
            }
        })


    }




</script>


</body>
</html>